<template>
	<div class="user-info-page  box relative">
		<div class="user-info-box" :style="statusBarHeightStyle">
			<div class="page-title">
				<span>个人中心</span>
			</div>
			<div class="user-info">
				<div class="user-image">
					<image :src="obj.avatar" mode="aspectFill" />
				</div>
				<div class="user-detail">
					<span class="user-name">{{ obj.nickname }}</span>
					<span class="user-id">ID：{{ obj.sn }}</span>
				</div>
				<div class="edi-user-btn" @click="handleEditUser">
					<span>个人资料</span>
					<image mode="aspectFill" src="/static/img/chevron-bluepng.png"></image>
				</div>
			</div>
		</div>
		<view class="warter-box">
			<view class="box-inner">
				<image src="/static/icon/shui_icon.png" mode="aspectFill" class="shui-icon"></image>
				<view class="warter-info">
					<view class="warter-text">水质查询</view>
					<view class="warter-desc">水质看得见，喝的更放心</view>
				</view>
				<image @click="handleToUrl('/pages/warter-search/index')" src="/static/icon/shui_right.png"
					mode="aspectFill" class="shui-right-icon"></image>
			</view>
		</view>
		<div class="menu-wrapper">
<!--			<div class="menu-item" @click="handleToUrl('/pages/install-order/index')">-->
<!--				<image class="menu-icon" src="/static/images/m1.png" mode="aspectFill"></image>-->
<!--				<span class="menu-title">安装订单</span>-->
<!--				<image class="menu-chevron" mode="aspectFill" src="/static/images/chevron-right.png"></image>-->
<!--			</div>-->
			<div class="menu-item" @click="handleToUrl('/pages/recharge/record')">
				<image class="menu-icon" src="/static/images/m2.png" mode="aspectFill"></image>
				<span class="menu-title">充值订单</span>
				<image class="menu-chevron" mode="aspectFill" src="/static/images/chevron-right.png"></image>
			</div>
			<div class="menu-item" @click="handleToUrl('/pages/mine/work-order/index')">
				<image class="menu-icon" src="/static/images/m3.png" mode="aspectFill"></image>
				<span class="menu-title">服务工单</span>
				<image class="menu-chevron" mode="aspectFill" src="/static/images/chevron-right.png"></image>
			</div>
			<div class="menu-item" @click="handleToUrl('/pages/water-admin/index')">
				<image class="menu-icon" src="/static/images/m4.png" mode="aspectFill"></image>
				<span class="menu-title">呼叫水管家</span>
				<image class="menu-chevron" mode="aspectFill" src="/static/images/chevron-right.png"></image>
			</div>
			<div class="menu-item" @click="handleKf">
				<image class="menu-icon" src="/static/images/m5.png" mode="aspectFill"></image>
				<span class="menu-title">专属客服</span>
				<image class="menu-chevron" mode="aspectFill" src="/static/images/chevron-right.png"></image>
			</div>
			<div class="menu-item" @click="handleToUrl('/pages/water-cost-order/index')">
				<image class="menu-icon" src="/static/images/m6.png" mode="aspectFill"></image>
				<span class="menu-title">直饮水水费单</span>
				<image class="menu-chevron" mode="aspectFill" src="/static/images/chevron-right.png"></image>
			</div>
		</div>
		<div class="absolute">
			<u-modal v-model="show" title="" show-cancel-button confirm-color="#FF6C0A"
				@confirm="handleToggleUserConfirm" @cancel="show=false">
				<div class="toggle-user-content">
					<span>是否要切换账号?</span>
				</div>
			</u-modal>
			<u-modal v-model="showLogout" title="" show-cancel-button confirm-color="#FF6C0A"
				@confirm="handleToggleUserConfirm" @cancel="showLogout=false">
				<div class="toggle-user-content">
					<span>确定退出登录?</span>
				</div>
			</u-modal>
		</div>
	</div>
</template>

<script>
	import { center } from '@/utils/index.js'
	import mixins from "@/mixins/mixin.js"
	import { logout } from '@/utils/login.js'
  import {request, showLoading} from '@/utils/tool'
	export default {
		mixins: [mixins],
		data() {
			return {
				obj: {
					yeji: {},
					image: {
						week: {
							daishenhe: 0,
							tongguo: 0,
							total: 0
						},
						month: {
							daishenhe: 0,
							tongguo: 0,
							total: 0
						}
					}
				},
				token: uni.getStorageSync('token'),
				show: false,
				showLogout: false,
				activeType: "week",
				activeImageType: "last",
        kefu_image: ""
			}
		},
		onShow() {
      this.getKeFu()
			if (this.token) {
				this.getInfo()
			}
		},
		methods: {
      async getKeFu() {
        const resp = await request({
          url: "/index/config",
          method: "GET",
        })
        const data = resp.data
        if (data.kefu_image) {
          this.kefu_image = data.kefu_image
        }
        console.log(resp, 'getKeFu')
      },
      handleKf(){
        if(!this.kefu_image) return
        uni.previewImage({
          urls: [this.kefu_image]
        })
      },
			handleToUrl(url) {
				uni.navigateTo({
					url
				})
			},
			handleYeJiDetail() {
				uni.navigateTo({
					url: "/pages/mine/yeji"
				})
			},
			handleChangeImageType(type) {
				if (this.activeImageType !== type) this.activeImageType = type
			},
			handleChangeType(type) {
				if (this.activeType !== type) this.activeType = type
			},
			handleToService() {
				uni.navigateTo({
					url: "/pages/mine/service"
				})
			},
			handleToChangePassword() {
				uni.navigateTo({
					url: "/pages/mine/changePassword"
				})
			},
			async handleToggleUserConfirm() {
				const hide = showLoading("正在退出")
				const resp = await logout().finally(hide)
				uni.removeStorageSync("token")
				uni.reLaunch({
					url: "/pages/login"
				})
			},
			handleToggleUser() {
				this.show = true
			},
			handleEditUser() {
				uni.navigateTo({
					url: "/pages/mine/info"
				})
			},
			// 用户信息
			getInfo() {
				center().then((res) => {
					if (res.code == 1) {
						const data = res.data
						console.log(data, 'datas');
						this.obj = data;
					}
				})
			},
			// 跳转用户信息
			btnInof() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/mine/info'
					})
				} else {
					uni.navigateTo({
						url: "/pages/login"
					})
				}
			},
			// 拨打电话
			btnTel() {
				uni.makePhoneCall({
					phoneNumber: '18757380789'
				})
			},
			// 退出登录
			btnLogOut() {
				if (!this.token) return uni.reLaunch({
					url: "/pages/login"
				})
				uni.showModal({
					title: '提示',
					content: '是否退出登录？',
					success: (res) => {
						if (res.confirm) {
							logout().then((res) => {
								if (res.code == 1) {
									this.token = ''
									uni.removeStorageSync('token');
									uni.reLaunch({
										url: '/pages/login'
									})
								} else {
									uni.showMsg(res.msg)
								}
							}).catch((err) => {
								uni.showMsg(err.msg)
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.warter-box {
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background: #EEF2FA;
		margin-top: -40rpx;
		overflow: hidden;
		padding: 32rpx;

		.box-inner {
			background: #fff;
			width: 100%;
			padding: 18rpx 24rpx;
			display: flex;
			align-items: center;
			border-radius: 12rpx;

			.warter-info {
				margin-left: 20rpx;

				.warter-text {
					font-size: 26rpx;
					color: #000000;
					line-height: 44rpx;
				}

				.warter-desc {
					font-size: 20rpx;
					color: #B5BBCA;
					line-height: 40rpx;
				}
			}
		}

		.shui-right-icon {
			width: 68rpx;
			height: 68rpx;
			margin-left: auto;
		}

		.shui-icon {
			width: 68rpx;
			height: 68rpx;
		}
	}

	.toggle-user-content {
		padding: 24rpx 0 88rpx;
		text-align: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		line-height: 48rpx;
	}

	.u-count-num {
		line-height: 96rpx;
	}


	.user-info-page {
		background: #EEF2FA;
		min-height: 100%;

		.menu-wrapper {
			margin: 24rpx 32rpx 0;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 16rpx;
			height: fit-content;

			.menu-item {
				display: flex;
				align-items: center;
				padding: 24rpx 32rpx;

				&:active {
					background: #f1f1f1;
				}

				.menu-icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}

				.menu-title {
					flex: 1;
					font-weight: 400;
					font-size: 28rpx;
					color: #272727;
					line-height: 44rpx;
				}

				.menu-chevron {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.user-info-box {
			width: 750rpx;
			// height: calc(334rpx + var(--status-height-value));
			height: calc(330rpx + var(--status-height-value));
			background: linear-gradient(90deg, #3361F0 100%, #3361F0 0);
			padding-top: var(--status-height-value);
			box-sizing: border-box;

			.user-account {
				margin: 0 30rpx;
				height: 216rpx;
				position: relative;
				background: #fff;

				.account-value {
					position: absolute;
					top: 44rpx;
					left: 32rpx;
					display: flex;
					flex-flow: column;

					.label-text {
						height: 40rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #976122;
					}



					.value-text {
						height: 96rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 68rpx;
						color: #976122;
						margin-top: 16rpx;
					}
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.user-info {
				margin-top: 32rpx;
				padding: 32rpx 0 32rpx 32rpx;
				box-sizing: border-box;
				position: relative;
				display: flex;
				align-items: center;

				.edi-user-btn {
					margin-left: auto;
					display: flex;
					width: 156rpx;
					height: 57rpx;
					border-radius: 42rpx 0 0 42rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					font-size: 24rpx;
					box-sizing: border-box;
					padding-left: 8rpx;
					background: #EAF2FF;
					color: #0565FF;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.user-detail {
					margin-left: 16rpx;
					display: flex;
					flex-flow: column;

					.user-name {
						max-width: 380rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						font-weight: 600;
						font-size: 40rpx;
						color: #FFFFFF;
						line-height: 56rpx;
					}

					.user-id {
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
						line-height: 56rpx;
					}
				}

				.user-image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					background: #f1f1f1;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.page-title {
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				padding-top: 8rpx;
				line-height: 46rpx;
				text-align: center;
			}
		}
	}
</style>